<template>
  <div class="wrap2">
    <h3>确认挂号信息</h3>
    <div class="addVisitor">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>请选择就诊人</span>
            <el-button class="button" type="primary" :icon="UserFilled" @click="addVisitor">添加就诊人</el-button>
          </div>
        </template>
        <div class="cardContent">
          <userCard v-for="(visitor,index) in visitorArr" :key="visitor.id" :visitor="visitor" @click="showSelect(index)" :flog="cardFlog" :currentIndex="index"/>
        </div>

      </el-card>
    </div>

    <div class="registrationInfo">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>挂号信息</span>
          </div>
        </template>
        <div class="content">
          <el-descriptions
              class="margin-top"
              :column="2"
              border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊日期：</div>
              </template>
              {{hospitalStore.doctorInfo.workDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊医院：</div>
              </template>
              {{hospitalStore.doctorInfo.param?.hosname}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊科室:</div>
              </template>
              {{hospitalStore.doctorInfo.param?.depname}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生姓名:</div>
              </template>
              {{hospitalStore.doctorInfo.docname}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医院职称:</div>
              </template>
              {{hospitalStore.doctorInfo.title}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生专长:</div>
              </template>
              {{hospitalStore.doctorInfo.skill}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生服务器:</div>
              </template>
              <span style="color: red">{{hospitalStore.doctorInfo.amount}}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
    <div class="confirm">
      <el-button type="primary" :disabled="cardFlog===-1" @click="submitOrder">确认挂号</el-button>
    </div>

  </div>
</template>

<script setup lang="ts">
import {Edit, UserFilled} from "@element-plus/icons-vue";
import UserCard from "@/pages/Hospital/userCard.vue";
import useUserStore from "@/store/modules/user";
import {onMounted, reactive, ref} from "vue";
import useHospitalDetailStore from "@/store/modules/hospitalDetail";
import {useRoute, useRouter} from "vue-router";
import {reqSubmitOrder} from "@/api/user";
import {ElMessage} from "element-plus";

let $route = useRoute();
let $router = useRouter();
let userStore = useUserStore();
let hospitalStore = useHospitalDetailStore();
let visitorArr = ref<[]>();
let cardFlog = ref<number>(-1); //用于激活选择


let showSelect = (index) => {
  cardFlog.value = index;
}
let fetchUserVisitorInfo = async () => {
  try {
    await userStore.getFindAll()
    visitorArr.value = userStore.visitorInfo;

  }catch (e) {
    console.log(e.message);
  }
} //请求用户就诊人信息
let fetchDoctorInfo = async () => {
  try {
    await hospitalStore.getDoctorInfo($route.query.docId as string)
  }catch (e) {
    console.log(e.message);
  }
} //请求预约医生的信息
let submitOrder = async () => {
  let hoscode = hospitalStore.doctorInfo.hoscode;
  let scheduleId = hospitalStore.doctorInfo.id;
  let patientId = userStore.visitorInfo[cardFlog.value].id;
  let result = await reqSubmitOrder(hoscode,scheduleId,patientId)
  if (result.code === 200) {
    ElMessage({type:"success",message:"挂号成功"})
    $router.push({path:'/user/order',query:{orderId:result.data}})
  }else {
    ElMessage({type:"error",message:result.message})
  }
}

const  addVisitor = () => {
  $router.push({path:'/user/patient',query:{type:'add'}})

}
onMounted(() => {
  fetchUserVisitorInfo();
  fetchDoctorInfo();
})
</script>

<style scoped lang="less">
.wrap2 {
  h3 {
    color: #7f7f7f;
    font-weight: 900;
    font-size: 20px;
  }
  .addVisitor {
    :deep(.card-header) {
      display: flex;
      justify-content: space-between;
      align-items: center;

    }
    .cardContent {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .registrationInfo {
  }

  .addVisitor, .registrationInfo {
    margin-top: 20px;
    span {
      font-size: 16px;
    }
  }

  .confirm {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }



}
</style>